<template>
	<div class="container">
		<view class="fliter">
			<view class="input-box single-input">
				<view class="item">
					<u-field :border-bottom="false" label-width="0" :disabled="true" :value="query.policyName" input-align="left"
						placeholder="请选择产品政策" clearable >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
				</view>
				<view class="item">
					<u-field :border-bottom="false" label-width="0" :disabled="true" :value="query.serviceName" input-align="left"
						placeholder="请选择服务费" clearable >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="openChoose"></text>
					</u-field>
				</view>
			</view>
			<view class="input-box double-input flex-space-between">
				<view class="item">
					<u-field :border-bottom="false" label-width="0" v-model="query.serialnoStart" input-align="left"
						@confirm="search" placeholder="SN号开始值">
						<!-- <text class="iconfont icon-saoma" slot="right" @click.stop="scanCode('start')"></text> -->
					</u-field>
				</view>
				<view class="item">
					<u-field :border-bottom="false" label-width="0" v-model="query.serialnoEnd" input-align="left"
						@confirm="search" placeholder="SN号结束值">
						<!-- <text class="iconfont icon-saoma" slot="right" @click.stop="scanCode('end')"></text> -->
					</u-field>
				</view>

				<view class="item" v-if="type == 'back'">
					<u-field :border-bottom="false" label-width="0" :disabled="true" :value="query.pTypeName" input-align="left"
						placeholder="请选择回拨方式" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showAction = true"></text>
					</u-field>
					<u-action-sheet @click="clickItem" :list="pList" v-model="showAction"></u-action-sheet>
				</view>
			</view>
		</view>
		<view class="termial-box" v-if="list.length">
			<view class="total">
				共计
				<text class="blue">{{ totalNum }}</text>
				台
			</view>
			<u-checkbox-group active-color="#4286F5" shape="circle" @change="checkboxGroupChange">
				<!-- @click.stop="toDetail(item)" -->
				<view class="t-item flex" v-model="item.checked" v-for="(item, index) in list" :key="index">
					<u-checkbox v-model="item.isActive" @change="chagneActive" :name="item.serialno"></u-checkbox>
					<view class="t-info">
						<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="机具SN号：" :value="item.serialno"
							class="title" />
						<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="绑定状态："
							:value="item.bindStatus == 0 ? '待绑定' : '已绑定'" />
						<!-- <u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="机具品牌：" :value="item.brandName" /> -->
						<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="产品政策："
							:value="item.policyName" />
						<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="通讯费：" :value="item.commFee" />
						<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="服务费："
							:value="item.serviceFee" />
					</view>
				</view>
			</u-checkbox-group>
			<uni-load-more :status="loadMore"></uni-load-more>
		</view>
		<view class="nodata" v-else>请搜索机具</view>
		<div class="terminal-top-bottom" v-if="list.length">
			<div class="terminal-top-bottom-bar">
				<div class="terminal-top-bottom-item-all">
					<!-- <van-checkbox @click="allCheckHandle" v-model="allCheckBoxFlag">全部添加</van-checkbox> -->
					<u-button class="add-all" size="small" shape="circle" :ripple="true" type="primary"
						@click="allCheckHandle">全部添加</u-button>
				</div>
				<!-- <div class="terminal-top-bottom-item-number color:">
           {{ selectCheckbox.length }} 台
        </div>-->
				<div class="terminal-top-bottom-item-number">
					已选
					<span style="color: red">{{ selectCheckbox.length }}</span>
					台
				</div>

				<div class="terminal-top-bottom-item-btn"><u-button class="sure-btn" type="primary" :ripple="true"
						@click="issuedHandle">修改服务费</u-button></div>
			</div>
		</div>
		<u-picker title="政策" v-model="showPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onConfirm" @cancel="showPicker = false" />
		<u-picker title="服务费" v-model="chooseService" mode="selector" :range="serviceFeeList" range-key="serviceName"
			confirm-color="#4888FB" @confirm="onServiceConfirm" @cancel="chooseService = false" />
		<u-picker title="修改服务费" v-model="chooseService2" mode="selector" :range="canChangeServiceFeeList"
			range-key="activeName" confirm-color="#4888FB" @confirm="onServiceConfirm2" @cancel="chooseService2 = false" />
		<u-popup v-model="submitPopup" mode="center" :mask-close-able="false" :border-radius="20" width="500" class="alertP"
			zIndex="99">
			<div class="title">确认修改?</div>
			<div class="alertPopupContent">
				<p class="sub-t">请认真核对修改信息</p>
				<p class="content">修改数量：{{ selectCheckbox.length }}台</p>
				<view class="item-input">
					<u-field :border-bottom="false" label-width="0" :disabled="true" :value="query.changeServiceFeeName"
						input-align="left" placeholder="请选择服务费" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="chooseService2 = true"></text>
					</u-field>
				</view>
			</div>
			<div class="sure flex">
				<text class="cancle border" @click="submitPopup = false">取消</text>
				<text class="confirm" @click="sureHandle">确定</text>
			</div>
		</u-popup>
	</div>
</template>

<script>
	import {
		canAssginList,
		canRecycleList,
		assign,
		callback,
		serviceList,
		canChangeServiceFeeList as canChangeServiceFeeListQuest,
		changeServiceFeeApply
	} from '_a/terminal';
	import loadMoreData from '@/mixins/loadmore';

	export default {
		mixins: [loadMoreData],
		data() {
			return {
				query: {
					bindStatus: 0
				},
				list: [],
				selectCheckbox: [],
				type: 'assign', //assign:划拨 ,back:回拨
				pList: [
					// {
					// 	text: '回拨给平台',
					// 	value: 0
					// },
					{
						text: '回拨给上级',
						value: 1
					}
				],
				showAction: false,
				showPicker: false,
				chooseService: false,
				chooseService2: false,
				submitPopup: false,
				chooseIndex1: 0,
				totalNum: 0,
				pageSize: 20,
				serviceFeeList: [],
				canChangeServiceFeeList: [],
				serviceName: '',
				serviceName2: ''
			};
		},
		computed: {
			policyList() {
				return this.$store.getters.policyList || [];
			}
		},
		onLoad(o) {
			this.query.policyCode = this.policyList[0].policyCode;
			this.query.policyName = this.policyList[0].policyName;
			this.getSList()
			this.init();
			// this.getSList();

			// let item = this.policyList.find((item) => item.policyCode == o.policyCode);
			// if (item) {
			//   this.query.policyName = item.policyName;
			// }
			// this.getList();
		},

		methods: {
			openChoose() {
				if (!this.query.policyCode) {
					return this.$tip.toast('请先选择政策!')
				}
				this.chooseService = true
			},
			onNavigationBarButtonTap(e) {
				this.$nav.push({
					path: '/pages/home/policy/changeServiceList'
				});
			},
			getSList() {
				serviceList({
					pageSize: 200,
					pageNum: 1,
					upActiveStatus: 1,
					activeType: 0,//服务费
					policyCode: this.query.policyCode
				}).then(response => {
					// this.serviceFeeList = response.rows;
					this.serviceFeeList = response.rows.map(item=>{
						item.serviceName = item.brandName +'-'+ item.activeName
						return item
					});
				});
			},
			toDetail(item) {
				this.$storage.setStore('termDetailInfo', item);
				this.$nav.push({
					path: '/pages/home/terminal/terminalInfo'
				});
			},
			sureHandle() {
				let paramsList = this.selectCheckbox.map(item => {
					let obj = {
						serialno: item,
						activeCode: this.query.changeServiceFeeCode,
						autoChannelFlag: 0
					};
					return obj;
				});
				if (paramsList.length <= 0) {
					return this.$tip.toast('请选择机具');
				}

				changeServiceFeeApply(paramsList).then(res => {
					this.submitPopup = false;
					if (res.data && res.data.length) {
						let msg = '';
						res.data.forEach(item => {
							msg += `sn号:${item.serialno},失败原因:${item.msg}.`;
						});
						this.$tip.modal({
							content: msg,
							showCancel: false
						});
					} else {
						this.$tip.modal({
							content: '变更服务费申请已受理，请前往【变更记录】查看变更进度',
							showCancel: false
						});
						this.init();
					}
				});
			},
			getSubAgent() {
				getByName().then(res => {
					this.serviceFeeList = res.data;
				});
			},
			search() {
				this.init();
			},
			reachBottomCallBack() {
				this.getList();
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.pageNum = 1;
					this.selectCheckbox = [];
					this.refreshLoad();
				});
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.query
				};
				canAssginList(params).then(res => {
					var list = res.rows;
					this.totalNum = res.total;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});
			},
			scanCode(type) {
				let _this = this;
				// #ifdef APP-PLUS
				console.log(123);
				const currentWebview = this.$mp.page.$getAppWebview(); //注意相关操作写在APP-PLUS条件编译下
				var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {
					top: '100px',
					left: '0px',
					width: '300px',
					height: '300px',
					position: 'static'
				});
				//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
				//注意扫码区域需为正方形，否则影响扫码识别率
				currentWebview.append(barcode);
				// #endif
				// this.$tip.loading('识别中....')
				// // #ifdef H5
				// this.$tip.toast('暂不支持!');
				// // #endif
				// // #ifndef H5
				// uni.scanCode({
				// 	success(res) {
				// 		_this.$tip.loaded();
				// 		_this.$tip.toast('识别成功!');
				// 		if (type == 'start') {
				// 			_this.query.startNo = res.result;
				// 		} else {
				// 			_this.query.endNo = res.result;
				// 		}
				// 	},
				// 	fail() {
				// 		_this.$tip.loaded();
				// 	}
				// });
				//// #endif
			},
			clickItem(e) {
				this.query.pType = this.pList[e].value;
				this.query.pTypeName = this.pList[e].text;
			},
			onServiceConfirm(e) {
				this.query.serviceFeeCode = this.serviceFeeList[e[0]].activeCode;
				this.query.serviceName = this.serviceFeeList[e[0]].serviceName;
				this.init();
			},
			onServiceConfirm2(e) {
				this.query.changeServiceFeeName = this.canChangeServiceFeeList[e[0]].activeName;
				this.query.changeServiceFeeCode = this.canChangeServiceFeeList[e[0]].activeCode;
			},
			onConfirm(e) {
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
				this.getSList()
				this.init();
				// this.chooseIndex = e[0];
			},
			chagneActive(item) {
				item.isActive = !item.isActive
				this.$forceUpdate();
			},
			checkboxGroupChange(v) {
				this.selectCheckbox = v;
				// console.log(v);
			},
			allCheckHandle() {
				/** 全选 **/
				let arr = [];
				const list = this.list;
				let isAllSelect = list.every(item => item.isActive);
				if (isAllSelect) {
					return this.$tip.toast('已经全部添加了！');
				}
				if (list.length > 0 && this.selectCheckbox.length > 0) {
					if (this.selectCheckbox[0].brandId != list[0].brandId) {
						return this.$tip.toast('请选择同一品牌的机具!');
					}
				}
				if (list.length > 0) {
					let idList = this.list.map(item => item.id);
					this.list.map(item => {
						item.isActive = true;
						return item;
					});
					// let selectIdList = this.selectCheckbox.map(item => item.id);
					// let selectIdList = this.selectCheckbox;

					this.selectCheckbox = this.list.map(item => item.serialno);

					// list.forEach((item) => {
					// if (list.length === checkBoxLength) {
					//   this.selectCheckbox = [];
					//   this.allCheckBoxFlag = false;
					// } else {
					//   this.allCheckBoxFlag = true;
					//   arr.push(item);
					// }
					// });
				}
			},
			issuedHandle() {
				/** 下发机具 **/
				if (this.selectCheckbox.length == 0) {
					return this.$tip.toast('请选择修改机具');
				}
				console.log(this.selectCheckbox[0]);
				canChangeServiceFeeListQuest({
					serialno: this.selectCheckbox[0]
				}).then(res => {
					if (res.data.length) {
						this.canChangeServiceFeeList = res.data;
						this.submitPopup = true;
					} else {
						return this.$tip.toast('无可修改服务费!');
					}
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	.container {
		padding: R(30) 0 R(140);
	}

	.fliter {
		margin: 0 R(25);

		.single-input {
			flex-wrap: wrap;
			align-items: center;

			.item {
				background: #fff;
				width: 100%;
				padding-right: R(30);
				padding-left: R(10);
				height: R(80);
				background: #ffffff;
				border-radius: R(40);
				margin-bottom: R(20);

				.icon-saoma {
					color: $themeColor;
				}
			}
		}

		.double-input {
			flex-wrap: wrap;
			align-items: center;

			.item {
				background: #fff;
				width: 48%;
				height: R(80);
				background: #ffffff;
				border-radius: R(40);
				margin-bottom: R(20);

				.icon-saoma {
					color: $themeColor;
				}
			}
		}
	}

	.termial-box {
		margin: 0 R(25);
		background: #fff;
		border-radius: R(10);
		padding: R(26) R(30);

		.total {
			font-size: R(24);
			font-weight: 400;
			color: #737373;
			margin-bottom: R(20);

			.blue {
				color: #4286f5;
			}
		}

		/deep/.u-checkbox-group {
			width: 100%;
		}

		.t-item {
			padding: R(14) 0 R(24);
			width: 100%;
			border-bottom: 1px solid #eee;

			.title {
				font-size: R(30);
				font-weight: bold;
				color: #1a1a1a;

				/deep/.u-cell__value {
					color: #1a1a1a;
				}
			}

			/deep/.u-cell {
				padding: R(4) R(10);

				.u-cell__value {
					text-align: left;
				}
			}
		}
	}

	.terminal-top-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		-webkit-user-select: none;
		user-select: none;
	}

	.terminal-top-bottom-bar {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: end;
		height: R(104);
		font-size: R(28);

		.add-all {
			font-size: R(28);
			height: R(60);
			width: R(150);
		}

		.sure-btn {
			height: R(88);
			margin-right: R(30);
		}
	}

	.terminal-top-bottom-item-all,
	.terminal-top-bottom-item-number,
	.terminal-top-bottom-item-look {
		flex: 1;
	}

	.terminal-top-bottom-item-look {
		color: #a5a5a5;
	}

	.alertP {
		text-align: center;

		.title {
			padding: R(20);
			font-size: R(30);
			font-weight: 400;
			color: #000;
			// border-bottom: 1px solid #eee;
		}

		.alertPopupContent {
			padding: R(10) 0 R(30);
		}

		.sub-t {
			font-size: R(26px);
			font-weight: 400;
			color: #737373;
		}

		.content {
			color: #5798f3;
			padding-top: R(10);
		}

		.item-input {
			padding: R(0) R(20);
			height: R(60);
			background: #fff;
			border-top: 1px dashed #eee;
			margin-top: R(30);

			.icon-saoma {
				color: $themeColor;
			}
		}

		.sure {
			text-align: center;
			// padding: R(20);
			height: R(92);
			line-height: R(92);
			font-size: R(30);
			border-top: 1px solid #eee;
			color: $themeColor;

			.border {
				border-right: 1px solid #eee;
			}

			text {
				width: 50%;
				font-size: R(30);
				font-weight: 400;
				color: #262626;
			}

			.confirm {
				color: #5798f3;
			}
		}

		/deep/.van-dialog__header {
			padding: 7px;
			font-weight: 500;
			line-height: 24px;
			text-align: center;
			border-bottom: 1px solid #eee;
		}

		p:not(:last-child) {
			margin-bottom: 5px;
		}
	}

	.nodata {
		text-align: center;
		color: #999;
		padding-top: R(30);
	}
</style>